<template>
  <TitleBox :title="title" :imgsrc="imgsrc"/>
  <div class="sentence-container">
    <h2>大会金句</h2>
    <div class="sentence-wrapper">
      <div class="sentence-left-top">
        <div class="title">
          <div class="avatar-container">
            <img src="https://img2023.gcsis.cn/2023/4/1a80708d46f64e079919a2c93a6aa7c4.png" alt="" style="width: 8vw;height: 8vw; border-radius: 8vw;">
          </div>
          <div class="intro-container">
            <div class="intro">
              <div class="name">
                范渊
              </div>
              <div class="decroration"></div>
              <div class="summary">
                安恒董事长
              </div>
            </div>
            
          </div>
        </div>
        <div class="text-container">
          <div class="text">
            <el-icon size="2vw"><Avatar /></el-icon>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;过去我们看数字政务就是数字政务，数字经济就是数字经济。站在今天，数字政务已经成为一个最大的基础设施来支撑起相关的应用。同时它又不是孤立的，而是在不同领域尝试，像产业大脑，在为数字赋能实体经济做出更大的贡献。数字政务、数字经济、数字社会、数字文化，已经非常有机的融合在一起，同时它又是有自己的特色和特点。
          </div>
        </div>
      </div>
      <div class="sentence-right-bottom">
        <div class="title">
          <div class="avatar-container">
            <img src="https://img2023.gcsis.cn/2023/4/79f975e56d9848788dccac0400609cec.png" alt="" style="width: 8vw;height: 8vw; border-radius: 8vw;">
          </div>
          <div class="intro-container">
            <div class="intro">
              <div class="name">
                方滨兴
              </div>
              <div class="decroration"></div>
              <div class="summary">
                中国工程院院士
              </div>
            </div>
            
          </div>
        </div>
        <div class="text-container">
          <div class="text">
            <el-icon size="2vw"><Avatar /></el-icon>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;在全球数字融合的大背景下，数据资源已成为国家战略级资源，平衡数据要素流动与隐私保护的冲突，需要采用数据使用权和所有权相分离、数据可用不可见、数据不动程序动，分享价值不分享数据四个核心方法，充分释放数据价值。
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="news-container">
    <h2>热门资讯</h2>
    <div class="news">
      <div class="img">
        <img src="@/assets/info/highlight_right1.webp" alt="">
      </div>
      <div class="right-container">
        <div class="title">
          议题更前沿
        </div>
        <div class="summary">
          大会主题及议题、展览锚定数字中国建设要求，助力政企单位从政策、技术、人才、产业等各层面落实工作。大会主题及议题、展览锚定数字中国建设要求，助力政企单位从政策、技术、人才、产业等各层面落实工作。大会主题及议题、展览锚定数字中国建设要求，助力政企单位从政策、技术、人才、产业等各层面落实工作。
        </div>
        <div class="button-container">
          <RouterLink :to="{name:'assignment'}" class="link-style">
            <button>查看详情</button>
          </RouterLink>
        </div>
      </div>
    </div>
    <div class="news">
      <div class="img">
        <img src="@/assets/info/highlight_right2.webp" alt="">
      </div>
      <div class="right-container">
        <div class="title">
          线上更精彩
        </div>
        <div class="summary">
          “掌上论剑”将进一步丰富内容，增强互动性、趣味性，线上持续精彩。“掌上论剑”将进一步丰富内容，增强互动性、趣味性，线上持续精彩。“掌上论剑”将进一步丰富内容，增强互动性、趣味性，线上持续精彩。
        </div>
        <div class="button-container">
          <RouterLink :to="{ name:'home'}" class="link-style">
            <button>查看详情</button>
          </RouterLink>
        </div>
      </div>
    </div>
    <div class="news">
      <div class="img">
        <img src="@/assets/info/highlight_left1.webp" alt="">
      </div>
      <div class="right-container">
        <div class="title">
          成果更显著
        </div>
        <div class="summary">
          将推出国内首份《2023中国数字安全能力洞察报告》，报告涵盖趋势、科技、人才、实践等多部分内容，引领行业发展方向。将推出国内首份《2023中国数字安全能力洞察报告》，报告涵盖趋势、科技、人才、实践等多部分内容，引领行业发展方向。将推出国内首份《2023中国数字安全能力洞察报告》，报告涵盖趋势、科技、人才、实践等多部分内容，引领行业发展方向。
        </div>
        <div class="button-container">
          <RouterLink :to="{name:'product'}" class="link-style">
            <button>查看详情</button>
          </RouterLink>
        </div>
      </div>
    </div>
  </div>
  <div class="review-container">
    <h2>大会嘉宾PPT下载</h2>
    <div class="swiper">
      <div class="container">
        <div class="block text-center">
          <el-carousel
            :interval="0"
            type="card"
            height="520px"
            indicator-position="none"
          >
            <el-carousel-item v-for="item in previousReviewArray" :key="item">
              <a :href="item.web" target="_blank">
                <div class="img">
                  <img :src="item.img" :alt="item.title" />
                </div>
                <span class="title">
                  {{ item.title }}
                </span>
              </a>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script setup lang="ts" name="Info">
  import { ref } from 'vue';
  import { RouterLink } from 'vue-router'
  import TitleBox from '@/components/titlebox.vue';
  import img from '@/assets/info/info_welcome.png'

  const title = ref('会议资讯')
  const imgsrc = img
  
  let previousReviewArray = [
    {
      img: "https://cnstatic01.e.vhall.com/upload/interacts/screen-imgs/202305/db/85/db85403ee83d2d178951849efb2ca06e.jpg?mode=1&have-wap-image=750",
      title: "数字中国&安全治理论坛PPT下载",
      web: "https://app-martech.dbappsecurity.com.cn/resources/ResourcePc/resourcePcInfo?pf_uid=17709_1776&pf_type=3&id=272&active=3&channel_id=8812&channel_name=%E8%A5%BF%E6%B9%96%E8%AE%BA%E5%89%91%E5%AE%98%E7%BD%91&tag_id=4bceffafcf44fcee",
    },
    {
      img: "https://cnstatic01.e.vhall.com/upload/interacts/screen-imgs/202305/b4/81/b481b527f283f914b86e0552432f80b6.jpg?mode=1&have-wap-image=750",
      title: "信创软件供应链安全论坛PPT下载",
      web: "https://app-martech.dbappsecurity.com.cn/resources/ResourcePc/ResourcePcInfo?pf_uid=17709_1776&id=274&source=1&pf_type=3&channel_id=8812&channel_name=%E8%A5%BF%E6%B9%96%E8%AE%BA%E5%89%91%E5%AE%98%E7%BD%91&tag_id=4bceffafcf44fcee:;",
    },
    {
      img: "https://cnstatic01.e.vhall.com/upload/interacts/screen-imgs/202305/5c/9b/5c9b7d2680fbfba219c5f6b4aaeb194b.jpg?mode=1&have-wap-image=750",
      title: "车联网安全论坛PPT下载",
      web: "https://2020.gcsis.cn/",
    },
    {
      img: "https://cnstatic01.e.vhall.com/upload/interacts/screen-imgs/202305/db/85/db85403ee83d2d178951849efb2ca06e.jpg?mode=1&have-wap-image=750",
      title: "数字中国&安全治理论坛PPT下载",
      web: "https://app-martech.dbappsecurity.com.cn/resources/ResourcePc/resourcePcInfo?pf_uid=17709_1776&pf_type=3&id=272&active=3&channel_id=8812&channel_name=%E8%A5%BF%E6%B9%96%E8%AE%BA%E5%89%91%E5%AE%98%E7%BD%91&tag_id=4bceffafcf44fcee",
    },
    {
      img: "https://cnstatic01.e.vhall.com/upload/interacts/screen-imgs/202305/b4/81/b481b527f283f914b86e0552432f80b6.jpg?mode=1&have-wap-image=750",
      title: "信创软件供应链安全论坛PPT下载",
      web: "https://app-martech.dbappsecurity.com.cn/resources/ResourcePc/ResourcePcInfo?pf_uid=17709_1776&id=274&source=1&pf_type=3&channel_id=8812&channel_name=%E8%A5%BF%E6%B9%96%E8%AE%BA%E5%89%91%E5%AE%98%E7%BD%91&tag_id=4bceffafcf44fcee:;",
    },
    {
      img: "https://cnstatic01.e.vhall.com/upload/interacts/screen-imgs/202305/5c/9b/5c9b7d2680fbfba219c5f6b4aaeb194b.jpg?mode=1&have-wap-image=750",
      title: "车联网安全论坛PPT下载",
      web: "https://2020.gcsis.cn/",
    }
  ];
</script>
  
<style scoped lang="scss">
.sentence-container{
  width: 100%;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  z-index: 1;
  .sentence-wrapper{
    position: relative;
    width: 100%;
    height: 30vw;
    margin-top: 4vw;
    .sentence-left-top{
      position: absolute;
      left: 0;
      top: 0;
      width: 41.875vw;
      height: 24.5833vw;
      z-index: 2;
      border-radius: 1.0417vw;
      border: solid black .1042vw;
      padding: 3vw;
      background-color: #fff;
      .title{
        width: 100%;
        height: 8vw;
        display: flex;       
        .avatar-container{
          width: 8vw;
          height: 8vw;
          border-radius: 8vw;
        }
        .intro-container{
          width: 26vw;
          height: 100%;
          position: relative;
          .intro{
            width: 24vw;
            height: 100%;
            margin-left: 2vw;
            margin-top: 1vw;
            .name{
              font-size: 2vw;
              font-weight: 530;
            }
            .decroration{
              margin-top: 1vw;
              width: 3vw;
              height: .1563vw;
              background-color: #2997ff;
            }
            .summary{
              margin-top: 1vw;
              font-size: 1.25vw;
            }
          }
        }
      }
      .text-container{
        width: 34vw;
        height: 12vw;
        position: relative;
        .text{
          padding-top: 1vw;
          font-size: .8333vw;
          line-height: 2vw;
          align-items: center;
          max-width:28vw;
          ::v-deep(.el-icon){
            position: absolute;
          }
        }
      }
    }
    .sentence-right-bottom{
      position: absolute;
      right: 0;
      bottom: 0;
      width: 41.875vw;
      height: 24.5833vw;
      z-index: 3;
      background-color: white;
      border-radius: 1.0417vw;
      border: solid black .1042vw;
      padding: 3vw;
      padding-left: 5vw;
      .title{
        width: 100%;
        height: 8vw;
        display: flex;       
        .avatar-container{
          width: 8vw;
          height: 8vw;
          border-radius: 8vw;
          background-color: pink;
        }
        .intro-container{
          width: 26vw;
          height: 100%;
          position: relative;
          .intro{
            width: 24vw;
            height: 100%;
            margin-left: 2vw;
            margin-top: 1vw;
            .name{
              font-size: 2vw;
              font-weight: 530;
            }
            .decroration{
              margin-top: 1vw;
              width: 3vw;
              height: .1563vw;
              background-color: #2997ff;
            }
            .summary{
              margin-top: 1vw;
              font-size: 1.25vw;
            }
          }
        }
      }
      .text-container{
        width: 34vw;
        height: 12vw;
        position: relative;
        .text{
          padding-top: 1vw;
          font-size: .8333vw;
          line-height: 2vw;
          ::v-deep(.el-icon){
            position: absolute;
          }
        }
      }
    }

  }
  //.sentence-wrapper :nth-child(2){
  //  background-color: white;
  //}
}
.news-container{
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
  padding-top: 6vw;
  h2{
    padding-bottom: 2vw;
  }
  .news{
    display: flex;
    width: 100%;
    height: 18vw;
    margin: 2vw 0;
    border-radius: 1.0417vw;
    border: solid black .1042vw;
    padding: 2vw;
    .img{
      width: 14vw;
      height: 14vw;
      border-radius: 1.0417vw;
      overflow: hidden;
      img{
        width: 14vw;
        height: 14vw;
      }
    }
    .right-container{
      width:60vw;
      padding: 0 4vw;
      position: relative;
      .title{
        font-size: 2.1875vw;
        font-weight: 530;
        line-height: 4.375vw;
      }
      .summary{
        margin-top:1vw;
        font-size: .8333vw;
        line-height: 2vw;
      }
      .button-container{
        position: absolute;
        right: 2vw;
        bottom: 0;
        .link-style{
          text-decoration: none;
        }
        button{
          border-radius: 1.0417vw;
          border: solid black .1042vw;
          width: 6.25vw;
          height: 2.125vw;
          background-color: #fff;
          justify-content: center;
          cursor: pointer;
          font-size: .8333vw;
          font-weight: 700;
          letter-spacing: 0.1vw;
        }
        button:hover{
          background-color: #2997ff;
        }
      }
    } 
  }
}
.review-container{
  padding-top: 4vw;
  width: 100%;
  height: 45vw;
  .swiper {
    margin-top: 5vw;
    height: 520px;
    position: relative;
    .container {
      margin: 0 auto;
      width: 100%;
      height: 520px;
      position: relative;
      .el-carousel__item {
        height: 520px;
        background-color: #fff;
        text-align: center;
        border-radius: 1.0417vw;
        border: solid white 1px;
        .img {
          overflow: hidden;
          img {
            width: 100%;
            height: 300px;
            transition: all 0.25s;
            overflow: hidden;
          }
          img:hover {
            scale: (1.1);
          }
        }
        .title {
          display: inline-block;
          margin-top: 2.0833vw;
          font-size: 1.4583vw;
        }
      }
    }
  }
}
</style>
  